<template>
	<view class="">
		<view class="calc150 pl20 v100  pr20 bgfff">
			<u-sticky>
				<view class="bgfff col33">
					<view :style="{'paddingTop':statusBarHeigh + 'px',}">
						<view class="flex alicen pl10" :style="{'height':menuButtonInfo.height + 'px',}">
							<u-icon name="arrow-left" color="#070707" size="18" @click="goback()"></u-icon>
						</view>
					</view>
					<view class="pb10"></view>
					<view class="flex fz28 col33 alicen between bdr1_bottom pb20 boree">
						<view class="">已选({{arr.length}})</view>
						<view class="">本科</view>
					</view>
					<view class="pb30"></view>
					<u-search v-if="idx == 'major'" placeholder="请输入相关专业" @custom="majorsearch" v-model="majorName" @search="majorsearch"></u-search>
					<view class="pb20"></view>
					<view class="fz30 bold">相关搜索</view>
					<!-- <view class="flex alicen between">
						<view class="fz28">经济学类</view>
						<image class="w30 h30" :src="cosImageUrl('/check.png',true)" mode="aspectFill"></image>
					</view> -->
				</view>
			</u-sticky>
			<scroll-view scroll-y="true" class="h_search" @scrolltolower="lowermore">
				<view class="" v-for="(item,index) in majList">
					<view class="flex alicen between mt20 mb20" @click="selectItem(item)">
						<view class="">{{item.majorName||item.name}}</view>
						<image class="w40 h40"
							:src="arr.includes(item)?cosImageUrl('check.png',true):cosImageUrl('nocheck.png',true)"
							mode="aspectFill"></image>
					</view>
				</view>
			</scroll-view>

		</view>
		<view class="fixed pb20 w100b bgfff zdex9" :style="{'bottom':safeAreaBottom.safeAreaInsets.bottom +'rpx'}">
			<view class=" ml20 mr20 bgff000 colff pt20 pb20 ius100 col00 fz30 flexCenter" @tap="submitAdd()">确认添加</view>
		</view>
		<view class="bgfff w100b fixed b0">
		</view>
	</view>
</template>

<script>
	import {
		province_list,
		school_level,
		school_types,
		schoolNames
	} from "@/utils/api/dict.js"
	export default {
		data() {
			return {
				idx: null,
				pageNum:1,
				majList: [], //专业的数组
				arr: [], //选择的数据进数组
				majorName:'',//模糊查询的专业名称
			}
		},
		onLoad(options) {
			if (options.idx) {
				this.idx = options.idx
			}
			this.search();
		},
		methods: {
			lowermore(){
				console.log('触底函数')
				if(this.idx !== 'major') return; 
				this.pageNum++;
				this.search();
			},
			//选中的数据进数组
			selectItem(item) {
				let a1 = this.arr.includes(item)
				if (!a1) {
					this.arr.push(item)
				}
				if (a1) {
					this.arr = this.arr.filter(item1 => item1 != item);
				}
			},
			//确定添加
			async submitAdd() {
				if (!this.arr.length) return this.showMsg('请选择专业或者地区');
				let params = {
					userId: this.readData('useId'),
					stype: this.idx,
					scode:this.idx == 'major'?this.joinValues(this.arr, 'majorCode'):this.joinValues(this.arr, 'id')
				}
				let adres = await this.request.get('/api/addMemberSetting', {
					params
				})
				console.log('adres', adres)
				if (adres.code == 200) {
					this.successToShow(adres.msg || '添加成功', call => {
						this.arr = []
						this.majList = []
						this.goback(1);
					})
				}
			},
			//专业搜索事件
			majorsearch(){
				this.majList = []
				this.pageNum = 1
				this.search()
			},
			async search() {

				try {
					//idx 1 是专业 2 地区
					if (this.idx == 'major') {
						let params = {
							pageNum:this.pageNum,
							userId: this.readData('useId'),
							majorName:this.majorName||'',//模糊查询
						}
						let major = await this.request.get('/api/queryUserMajor', {
							params
						})
						if (major.code == 200) {
							this.majList = this.majList.concat(major.data)

						}
					}
					if (this.idx == 'province') {
						let params = {
							scrollstr: true
						}
						let province = await this.request.get('/api/children/list', {
							params
						})
						console.log('请求地区', province)
						this.majList = province
					}
				} catch (error) {
					console.log('有错误', error)
				}

			}
		}
	}
</script>

<style lang="scss">
	.h_search {
		height: calc(100vh - 150rpx);
		overflow: auto;
	}
	.calc150{height: calc(100vh - 150rpx)}
</style>